<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条件渲染</title>
</head>
<script type="text/javascript" src="../vue.js"></script>

<!--
      收集表单数据：
         若：<input type="text"/>，则v-model 收集的是value值，用户输入的就是value
         若：<input type="radio"/>，则v-model 收集的是value值，且要给标签配置value值
         若：<input type="checkbox"/>
              1.没有配置input的value属性，那么收集的就是checked（勾选 或 未勾选  是布尔值）
              2.配置input的value属性：
                  （1）.v-model的初始值是非数组，那么收集的就是 checked（勾选 或 未勾选  是布尔值）
                  （2）.v-model的初始值是数组，那么收集的就是value组成的数组
                 备注：v-model 的三个修饰符
                        lazy：失去焦点再收集数据
                        number：输入字符串转为有效的数字
                        trim：去除前置空格
-->

<body>

<div id="root">
  <form @submit.prevent="demo">
    账号: <input type="text" v-model.trim="userInfo.account"><br/><br/>
    密码: <input type="password" v-model="userInfo.password"><br/><br/>
    年龄: <input type="number" v-model.number="userInfo.age"><br/><br/>
    性别：
    男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>
    爱好
    学习<input type="checkbox"  v-model="userInfo.hobby" value="study">
    打游戏<input type="checkbox" v-model="userInfo.hobby" value="paly">
    吃饭<input type="checkbox"  v-model="userInfo.hobby" value="eat"><br/><br/>

    所属校区
    <select v-model="userInfo.address">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">武汉</option>
    </select><br/><br/>
    其他信息
    <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
    <input type="checkbox" v-model="userInfo.agree"> 阅读并接受用户协议 <a href="https://www.baidu.com">用户协议</a><br/><br/>
    <button >提交</button>

  </form>
</div>


</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      userInfo:{
        account:'',
        password:'',
        age:'',
        sex:'male',
        hobby:[],
        address:'beijing',
        other:'',
        agree: false
      },
    },
    methods:{
      demo(){
        console.log(JSON.stringify(this.userInfo))
      }
    }
  })


</script>
</html>